<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags" %>
<sj:head />

<h2>A AJAX based Double Select Box</h2>

<p class="text">
	Two select boxes with remote json content. The second select box content is dependent from the first one.
</p>
<strong>Reload example with two select boxes.</strong>
<s:form id="formSelectReload" namespace="/jquery" action="echo" theme="simple" cssClass="yform">
	<fieldset>
		<legend>AJAX Form</legend>
		<div class="type-text">
			<label for="language">Language: </label>
			<s:url var="remoteurl" action="jsonsample"/>
			<sj:select
					href="%{remoteurl}"
					id="language"
					onChangeTopics="reloadsecondlist"
					name="language"
					list="languageObjList"
					listKey="myKey"
					listValue="myValue"
					emptyOption="true"
					headerKey="-1"
					headerValue="Please Select a Language"
					/>
		</div>
		<div class="type-text">
			<label for="echo">Framework: </label>
			<s:url var="remoteurl" action="jsonsample"/>
			<sj:select
					href="%{remoteurl}"
					id="selectWithReloadTopic"
					formIds="formSelectReload"
					reloadTopics="reloadsecondlist"
					name="echo"
					list="reloadList"
					emptyOption="true"
					headerKey="-1"
					headerValue="Please Select a Framework"
					/>
		</div>
		<br/>
		<div class="type-button">
			<sj:submit
					id="submitFormSelectReload"
					targets="result"
					value="AJAX Submit"
					indicator="indicator"
					button="true"
					/>
			<img id="indicator"
			     src="images/indicator.gif"
			     alt="Loading..."
			     style="display:none"
				/>
		</div>
	</fieldset>
</s:form>

<strong>Result Div :</strong>
<div id="result" class="result ui-widget-content ui-corner-all">Submit a form.</div>
